<template>
    <div id="morepro">
        <div class="session1">
            <img src="../../assets/img/morepro/s11.jpg" alt="">
            <div class="box"></div>
            <img src="../../assets/img/morepro/s12.jpg" alt="">
        </div>
        <div class="session2">
            <ul>
                <li v-for="(v,i) in session2">
                    <img :src="v.pic" alt="">
                    <h1>{{v.title}}</h1>
                    <span>{{v.txt}}</span>
                    <p>{{v.price}}</p>
                    <div class="buybtn">立即购买</div>  
                </li>
            </ul>
        </div>
        <div class="session3">
            <div class="box"></div>
            <img src="../../assets/img/morepro/s31.jpg" alt="">
            <div class="box2">  
                <img src="../../assets/img/morepro/s32.jpg" alt="">    
            </div>
            <div class="bg">
               <div class="info">
                    <h3>小米10</h3>
                    <div class="price"><i>￥</i><span>3799</span><i>起</i><del><span>￥3999</span></del></div>
                    <p>骁龙865处理器/1亿像素8K电影相机</p>
                    <div class="buybtn">立即购买</div>
                </div> 
            </div>
            <div class="box"></div>
            <div class="box2">  
                <img src="../../assets/img/morepro/s33.jpg" alt="">
            </div>
            <div class="bg">
               <div class="info">
                    <h3>小米10</h3>
                    <div class="price"><i>￥</i><span>3799</span><i>起</i><del><span>￥3999</span></del></div>
                    <p>骁龙865处理器/1亿像素8K电影相机</p>
                    <div class="buybtn">立即购买</div>
                </div> 
            </div>
            <div class="box"></div>
            <div class="box2">  
                <img src="../../assets/img/morepro/s34.jpg" alt="">
            </div>
            <div class="bg">
               <div class="info">
                    <h3>小米10</h3>
                    <div class="price"><i>￥</i><span>3799</span><i>起</i><del><span>￥3999</span></del></div>
                    <p>骁龙865处理器/1亿像素8K电影相机</p>
                    <div class="buybtn">立即购买</div>
                </div> 
            </div>
            <div class="box"></div>
            <div class="box2">  
                <img src="../../assets/img/morepro/s35.jpg" alt="">
            </div>
           <div class="bg">
               <div class="info">
                    <h3>小米10</h3>
                    <div class="price"><i>￥</i><span>3799</span><i>起</i><del><span>￥3999</span></del></div>
                    <p>骁龙865处理器/1亿像素8K电影相机</p>
                    <div class="buybtn">立即购买</div>
                </div> 
            </div>
            <div class="box"></div>
            <div class="box2">  
                <img src="../../assets/img/morepro/s36.jpg" alt="">
            </div>
           <div class="bg">
               <div class="info">
                    <h3>小米10</h3>
                    <div class="price"><i>￥</i><span>3799</span><i>起</i><del><span>￥3999</span></del></div>
                    <p>骁龙865处理器/1亿像素8K电影相机</p>
                    <div class="buybtn">立即购买</div>
                </div> 
            </div>
            <div class="box"></div>
            <img src="../../assets/img/morepro/s37.jpg" alt="">
            <div class="box"></div>
        </div>
        <div class="session4">
            <img src="../../assets/img/morepro/s41.jpg" alt="">
            <ul class="con">
                <li v-for="(v,i) in session4">
                    <img :src="v.pic" alt="">
                    <h2>{{v.title}}</h2>
                    <p>{{v.txt}}</p>
                    <span>{{v.price}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            session2:[],
            session4:[],
        }
    },
    mounted(){
        var _this=this;
        this.$http.get('./data/morepro.json')
        .then(function (response){
            console.log(response);
            // console.log(this);
            _this.session2=response.data.session2;
            _this.session4=response.data.session4;
        })
        .catch(function(error){
            console.log(error);
        })
    }
}
</script>
<style lang="less" scoped>
    h1{
        font-size: 17px;
        font-weight: bolder;
    }
    h2{
        font-size: 13px;
        font-weight: bolder;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
     ::-webkit-scrollbar {/*隐藏滚轮*/
		display: none;
     }
    .session1 img{
        width: 100%;
    }
    .session1 .box{
        width: 100%;
        height: 12.5px;
        background: #72BB6F;
        margin: 0.5px 0;
    }
    .session2 {
        overflow-x: scroll;
        background: #72BB6F;
    }
    .session2 ul{
        width: 500%;
        display: flex;
        flex-wrap: wrap;
        height: 270px;
        overflow: hidden;

    }
    .session2 li{
        width: 180px;
        margin:5px 8px;
        background: white;
        padding: 5px 0;
    }
    .session2 li:nth-of-type(1){
        margin-left: 70px;
    }
    .session2 li img{
        width: 80%;
    }
    .session2 span{
        color: rgba(0,0,0,0.6);
        font-size: 13px;
    }
    .session2 .buybtn{
        margin: 10px 46px;
        background-color: #ea625b;
        color: white;
        padding: 8px 0px;
    }
    .session3 .box{
        width: 100%;
        height: 12.5px;
        background: rgb(111, 145, 187);
        margin: 0.5px 0;
    }
    .session3>img{
        width: 100%;
    }
    .session3 .box2{
        padding: 0 8px;
        
        background: rgba(111, 145, 187);
    }
    .session3 .box2 img{
        width: 100%;
        border-radius: 3.5%;
    }
    .session3 .bg{
        background: rgb(111,145,187);
    }
    .session3 .info{
        border-radius: 5px;
        margin: 0 10px;
        background: lemonchiffon;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
    }
    .info h3{
        font-size: 17px;
        font-weight: bolder;
        text-align: left;
        width: 60%;
        margin: 5px 0;
    }
    .info p{
        text-align: left;
        width: 65%;
        font-size: 13px;
    }
    
    .session3 .buybtn{
        background-color: #ea625b;
        color: white;
        padding: 1px 12px;
    }

    .session4>img{
        width: 100%;
    }
    .session4 .con{
        width: 96%;
        padding: 0 8px;
        display: flex;
        flex-wrap: wrap;
        background: #F6B568;
    }
    .session4 li{
        background: white;
        width: 30%;
        margin: 1.66666667%;
        padding-bottom: 10px;
    }
    .session4 li>img{
        width: 100%;
    }
    .session4 p{
        font-size: 12px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .session4 span{
        color: red;
        font-size: bolder;
    }

</style>
